<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>登录</title>
</head>
<style>
	body{
			background: #74ebd5;
			background: -webkit-linear-gradient(to right, #ACB6E5, #74ebd5);
			background: linear-gradient(to right, #ACB6E5, #74ebd5);
			text-align: center;

	}
		.head{
			height: 200px;
		}
		h1{
			color:black;
			font-family: "Impact", Charcoal, sans-serif;
		}
		form{
			height: 70px;
		}
		.error{
			color: red;
			font-size: 13px;
		}
		a:link{
			text-decoration: none;
		}
		a:visited{
			text-decoration: none;
		}
		a:hover{
			text-decoration: underline;
		}
		a:active{
			text-decoration: underline;
		}
		button{
			line-height:30px;
			height:30px;
			width:131px;
			color:#ffffff;
			background-color:#4a8cf7;
			font-size:16px;
			font-weight:normal;
			font-family:Arial;
			border:0px solid #dcdcdc;
			-webkit-border-top-left-radius:3px;
			-moz-border-radius-topleft:3px;
			border-top-left-radius:3px;
			-webkit-border-top-right-radius:3px;
			-moz-border-radius-topright:3px;
			border-top-right-radius:3px;
			-webkit-border-bottom-left-radius:3px;
			-moz-border-radius-bottomleft:3px;
			border-bottom-left-radius:3px;
			-webkit-border-bottom-right-radius:3px;
			-moz-border-radius-bottomright:3px;
			border-bottom-right-radius:3px;
			-moz-box-shadow: inset 0px 0px 0px 0px #ffffff;
			-webkit-box-shadow: inset 0px 0px 0px 0px #ffffff;
			box-shadow: inset 0px 0px 0px 0px #ffffff;
			text-align:center;
			display:inline-block;
			text-decoration:none;
		}
		button:hover{
			background-color:#4a6bf7;
		}
</style>
<script>
	function login(){
		var xhr=new XMLHttpRequest();//创建一个 XMLHttpRequest请求的对象
		var url="";
		var user=document.getElementById("user").value;
		var password=document.getElementById("password").value;
		if(!user||!password){
			window.alert("用户名和密码不能为空");
			return;
		}
		var data="login user="+user+" password="+password;//获取user和password
		//配置POST请求
		xhr.open("POST",url,true);	//配置请求：方法,url,是否异步请求
		xhr.onreadystatechange=function()
		{
			if(xhr.status>=200&&xhr.status<300){
				if(xhr.responseText=="False"){
						document.getElementById("error").innerHTML="用户名或密码错误";
				}
				else if(xhr.responseText=="Sucess"){
						document.cookie=user;
						path="/index.html";
						window.location.assign("/index.html");
				}
			}else{
				 console.error('Error:', xhr.statusText);
			}
		}
		xhr.send(JSON.stringify(data));//发送请求数据并将其转换为JSON格式
}
</script>
<body>
	<div class="head"></div>
	<h1>欢迎来到我的网盘</h1>
	<form  method="post">
			<input type="text" name="user" id="user" placeholder="请输入账号"><br>
			<input type="password" name="password" id="password" placeholder="请输入密码"><br>
			<div class="error" id="error"></div>
	</form>
	<button type="button" id="button" onclick="login()">登录</button>
	<br>
	<p>如果没有账户请
	<a href="/reg.html">注册</a>
	</p>
</body>
</html>